<template>
  <div>
    <button v-for="(button, index) in buttons" :key="index" @click="goToPage(button.link)">
      {{ button.text }}
    </button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      cardType: '电子账户', //假设当前卡类型为储蓄卡，实际应用中可能通过props或API获取
    };
  },
  computed: {
    buttons() {
      let buttons = [];
      switch (this.cardType) {
        case '储蓄卡':
          buttons = [{ text: '去转账', link: '/transfer' }, { text: '买理财', link: '/wealth' }, { text: '查明细', link: '/details' }];
          break;
        case '电子账户':
          buttons = [{ text: '转入', link: '/deposit' }, { text: '转出', link: '/withdraw' }, { text: '查明细', link: '/details' }];
          break;
        // ...其他卡类型
        default:
          break;
      }
      return buttons;
    },
  },
  methods: {
    goToPage(link) {
      //后退--window.history.back();//相当于用户在浏览器的工具栏上点击返回按钮；
      //前进--window.history.forward() //相当于用户在浏览器的工具栏上点击前进按钮；
      // 根据实际应用的路由系统进行跳转，这里以HTML5 History API为例
      window.history.pushState({}, '', link);
    },
  },
};
</script>